<script lang="ts">
  export default {
    name: 'Member',
  };
</script>
<script setup lang="ts">
  import { computed, ref, unref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { showToast } from 'vant';
  import API_BANNER from '@/apis/banner';
  let searchData = ref('')
  let resBox = ref(false)
  const route = useRoute();
  const router = useRouter();

  const info = ref('')
  const onSearch = async () => {

    let res = await API_BANNER.userCheck({
      username: searchData.value
    })
    if (res.code == 1) {
      resBox.value = true
      info.value = res.data.group_content
    }
  }
</script>

<template>
  <div class="container">
    <h2 style="text-align: center;">{{$t('home.membershipInquiry')}}</h2>
    <van-search v-model="searchData" show-action left-icon="contact-o" shape="round"
      :placeholder="$t('home.please')+' '+$t('home.keyword')" background="transparent" @search="onSearch"
      @focus="resBox=false" style="position: relative;">
      <template #action>
        <div class="searchBtn" @click="onSearch">{{$t('home.search')}}</div>
      </template>
    </van-search>
    <div style="height: 60vh;padding:12px;">
      <div class="user" v-if="resBox">
        <img src="@/assets/img/mineIcon.png" alt="" style="width: 60px;height: 60px;">
        <div style="font-weight: 700;font-size: 26px;">@{{searchData}}</div>
        <van-divider dashed :style="{ backgroundColor: '#ccc' }"></van-divider>
        <div v-html="info">

        </div>
      </div>
    </div>
    <getBack></getBack>
  </div>
</template>

<style lang="less" scoped>
  .van-search__action {
    padding: 0;
  }

  .container {
    padding: 20px;
    background: url("@/assets/img/serice.jpg")no-repeat;
    background-size: 100% 100%;



    .searchBtn {
      background-color: #4e90ff;
      color: #fff;
      padding: 0 18px;
      border-radius: 20px;
      position: absolute;
      top: 10px;
      right: 0;
    }

    .user {
      text-align: center;
      background-color: #fff;
      padding: 30px;
      border-radius: 12px;
    }
  }
</style>